Due Wednesday January 22
The best way to develop your own site is to explore and critique existing sites. Choose 2 or 3 sites that you either visit on a regular basis or which you discovered for this assignment. In a short paragraph, evaluate each site on the following:
Layout
Information
Interactions
Audience
Describe what you like and dislike about the page, what is your experience with the site? Would you recommend the site to others? What is the target audience for the site? Does the target audience influence the layout? This must be presented as a valid HTML5 document linked to from your jump page.
Discussed all criteria
10
8
6
4
0
Discussed all of the questions listed above for 2 or more sites.
Discussed most of the questions listed above for 2 or more sites.
Discussed some of the questions listed above for 2 sites.
Discussed few of the questions listed above for 2 sites.
Concise critique
5
4
3
2
0
Free of grammatical errors, appropriate length.
Few grammatical errors or not appropriate length.
Some grammatical errors, descriptions are short and none descriptive.
Many grammatical errors, descriptions are short and none descriptive.
Total: /15
Comments:
Assignment 2. Lyrics Web Page
Due Wednesday January 29 Now due Monday, February 10
The goal of this assignment is to introduce you to basic web page creation. You will be required to include text as well as images for this assignment. Using the techniques covered in class, you will use Text Wrangler to format your page. To receive full credit, your page must include the following:
Lyrics to one of your favorite songs
A picture of the band as well as the album the song is from
The band name, album, year of release and label.
The formatting of the page should be as follows,
The song title at the top of the page should be formatted differently from the rest of the page text
All Verses should have the same formatting
All Choruses should have the same formatting
The <p> tag should be used for the band name, album, year of release and label.
Lyrics Properly Formatted
5
4
3
2
0
Verses formatted similarly, Choruses formatted similarly, variation of font size and color.
Verses formatted similarly, Choruses formatted similarly, little variation of font size and color.
Either Verses or Choruses not formatted similarly, little variation of font size and color.
Verses and Choruses formatted the same, little to no variation in font size and/or color.
Picture of the Album and the Band
10
7
0
Image displays on the page, the <alt> attribute is used, imaged sized appropriately.
Image does not display on the page or <alt> attribute is not used.
Information About the Song
5
4
3
2
0
Use of the <p> tag for the band name, album, year of release and label,
Use of the <p> tag but missing one or more of the band name, album, year of release and label.
Didn’t use the <p> tag and missing one or more of band name, album, year of release and label.
Didn’t use the <p> tag and missing, band name, album, year of release and label.
Proper formatting
5
4
3
2
0
Followed all above criteria for formatting of page contents and used a variety of tags (p,h1-h6).
Followed most of the above criteria for formatting of page contents and used a variety of tags (p,h1-h6).
Followed some of the above criteria for formatting of page contents and used a variety of tags (p,h1-h6).
Didn’t followed most of the above criteria for formatting of page contents and used a variety of tags (p,h1-h6).
Total: /25
Comments:
Assignment 3. Header/Web Banner for Web Site
Due Wednesday February 12
The goal of this assignment is to introduce you to creating a Header Image/Web Banner for your website.
To receive full credit, your header must include the following:
Proper file format (GIF, JPEG, or PNG)
Appropriate for the Website
Ability to communicate inspiration and process
Proper File Format and Dimensions
10
5
0
Image is appropriately formatted in both dimensions and file format.
Image is either appropriately formatted in both dimensions or is in proper file format.
Design Aesthetic
5
4
3
2
0
Ability to articulate the inspiration and the design process
Ability to articulate but no incite into the process
Struggled to articulate either the process or the inspiration
Static Header
5
0
File is appropriately embedded on the page using the <img> tag and all necessary attributes.
Presentation/Critique
5
0
Participated in presentation and critique.
Total: /25
Comments:
Assignment 4. Web Site Proposal
Due Wednesday February 26
The goal of this assignment is to write a written proposal for your website. Please check the Final Project assignment sheet for some of the criteria that will be required. Your proposal must include the technologies that will be used in your website and proof of research into similar sites. You must also provide a rough outline of the view and layout for all of the different pages that will make up your website.
To receive full credit, your proposal you must include the following:
Proof of research into your layout – examples of inspiration, etc.
Site Map with Organized file management
Wireframes – one for each page of your site, early mockups illustrating your process are encouraged.
Explanation of required technologies – i.e. JavaScript, PHP, CSS, etc.
Proof of Research/Process Documentation
10
7.5
0
Detailed documentation of process, screen captures of sites that influenced your design, color palette examples, description of goals and required technologies.
Some documentation of process, little to no example of inspiration, missing either color palette examples or descriptions of goals and required technologies.
Detailed Wireframes
10
0
One for each page of your final site, detailing page layout.
Site Map
5
0
Hierarchy showing all pages of the site connect back to the homepage.
Typed Packet and Presentation
5
3
0
A PDF file containing all necessary items listed above, participation in peer critique and presentation of proposed final site.
PDF file is missing one or more of the necessary items listed above or little to no participation in peer critique and presentation of proposed final site.
Total: /30
Comments:
Assignment 5. Final Project and Presentation
Due Monday March 24
The goal of this assignment is to create your final website from your proposal and the wireframes of the last assignment. In addition to creating the site, the student will present their finished work and participate in a peer critique of their work.
To receive full credit, you must include the following:
Compatible in IE, Firefox, Chrome, Safari (PC and Mac)
Valid HTML5 (fluid/flexible layout) – (+2% extra credit for responsive layout)
Semantic Best Practices are followed.
Working Links
Proper formatting
Use of CSS and JavaScript
Ability to communicate decisions regarding the layout
Index page
Artist Statement page or About page
Portfolio page, Products page or Services page (minimum of 5 items)
Contact page with form and PHP script
Page Titles
Meta Tags
CSS style sheet named and attached to each page on web site.
Validated Markup (6 points per page)
15
10
5
2
0
Every Page validates with no errors.
Most pages validate with minimal errors.
Some pages validate and there are many errors.
Only a few pages validate.
Validated CSS (6 points per page)
15
10
5
2
0
External Style sheet validates with no errors.
External Style sheet validates with minimal errors.
External Style sheet validates and there are many errors.
External Style sheet does not validate.
File Management
10
7.5
5
2.5
0
All files appropriately named and organized in folders as stated in syllabus.
Most files appropriately named and organized in folders as stated in syllabus.
Some files appropriately named and organized in folders as stated in syllabus.
Few files appropriately named and organized in folders as stated in syllabus.
Required Pages with working links
10
7.5
5
2.5
0
Final site is uploaded to student web space, All links work (pages and images).
Final site is uploaded to student web space, Most links work (pages and images).
Final site is uploaded to student web space, some links work (pages and images).
Final site is uploaded to student web space, few links work (pages and images).
Meta Tags and Page Titles (2 points per page)
10
7.5
5
2.5
0
Every page has appropriate and descriptive page titles and meta tags.
Most pages have appropriate and descriptive page titles and meta tags.
Some pages have appropriate and descriptive page titles and meta tags.
Few pages have appropriate and descriptive page titles and meta tags.
Proper Formatting of Tags, Text, & Image
10
7.5
5
2.5
0
All images have the alt attribute, CSS used for formatting of page elements, Classes and IDs are appropriately named, and unused tags are removed.
Most images have the alt attribute, CSS used for formatting of page elements, Classes and IDs are appropriately named, and unused tags are removed.
Some images have the alt attribute, CSS used for formatting of page elements, some Classes and IDs are appropriately named, and unused tags are not removed.
Missing ALT attribute, CSS used for formatting of page elements, Classes and IDs are not appropriately named, and unused tags are not removed.
Visual Presentation
5
4
3
2
0
Clearly articulated design choices and inspiration.
Mostly articulated design choices and inspiration.
Unclear on articulating design choices and inspiration.
Did not articulate design choices and inspiration.
Participation in Peer Critique
5
4
3
2
0
Participated in critique and gave lots of critique to fellow peers.
Participated in critique and gave some critique to fellow peers.
Participated in critique and gave little critique to fellow peers.
Participated in critique and gave little to no critique to fellow peers.
Code Organization
10
5
0
Organized CSS and HTML documents commented and clear of unnecessary code.
Organized HTML but not CSS
Use of CSS, PHP, and JS
5
4
3
2
0
CSS used to format page elements, at least one external style sheet connected to all pages, PHP contact form. All rules are formatted properly and unused rules are removed.
CSS used to format page elements, at least one external style sheet connected to all pages, PHP contact form. Most rules are formatted properly and unused rules are removed.
CSS used to format page elements, at least one external style sheet connected to all pages, PHP contact form. Some rules are formatted properly and unused rules are not removed.
CSS used to format page elements, no external style sheet connected to all pages, PHP contact form. Most rules are formatted properly and unused rules are removed.
CD/DVD with finished site
5
3
0
Working disc with site root folder and all necessary files.
Working disc with site root folder but missing some necessary files.
Total: /100
Comments:
The final grade will be based on the following scheduled activities:
Activity / Assignment
Title
Points
%
Assignment 1
Critiquing Web Sites
15
3.9
Assignment 2
Lyrics Web Page
25
6.3
Assignment 3
Header / Web Banner for Web Site
25
6.3
Assignment 4
Web Site Proposal
30
7.7
Assignment 5
Final Project
100
25.4
Quizzes & Exams
Quizzes / Class Participation
Quizzes as needed, professionalism and participating in class discussions
100
25.2
Study Questions
Study Questions (Week 8 study questions extra credit +2%)
50
12.6
Final Exam
50
12.6
If you have ZERO (0) absences in the quarter and a grade of B+ or higher (this includes tardies adding up to a missed class) you can EXEMPT the final!
ASSIGNMENTS
Use the following folder structure:/lastname_firstname (remote folder name: public_html)
..../assets
......../docs
......../fonts
......../images
......../thumbs
..../final documents
..../final prototype
......../assets
............/docs
............/fonts
............/images
............/thumbs
......../scripts
............/css
............/js
............/php
..../labs
......../assets
............/docs
............/fonts
............/images
............/thumbs
......../scripts
............/css
............/js
............/php
..../midterm
......../assets
............/docs
............/fonts
............/images
............/thumbs
......../scripts
............/css
............/js
............/php
..../scripts
......../css
......../js
......../php
..../study questions
Assignment 1. Critiquing Web Sites
Due Wednesday January 22The best way to develop your own site is to explore and critique existing sites. Choose 2 or 3 sites that you either visit on a regular basis or which you discovered for this assignment. In a short paragraph, evaluate each site on the following:
Describe what you like and dislike about the page, what is your experience with the site? Would you recommend the site to others? What is the target audience for the site? Does the target audience influence the layout? This must be presented as a valid HTML5 document linked to from your jump page.
Discussed all criteria
Concise critique
Total: /15
Comments:
Assignment 2. Lyrics Web Page
Due Wednesday January 29Now due Monday, February 10
The goal of this assignment is to introduce you to basic web page creation. You will be required to include text as well as images for this assignment. Using the techniques covered in class, you will use Text Wrangler to format your page. To receive full credit, your page must include the following:
Lyrics Properly Formatted
Picture of the Album and the Band
Information About the Song
Proper formatting
Total: /25
Comments:
Assignment 3. Header/Web Banner for Web Site
Due Wednesday February 12The goal of this assignment is to introduce you to creating a Header Image/Web Banner for your website.
To receive full credit, your header must include the following:
Proper File Format and Dimensions
Design Aesthetic
Static Header
Presentation/Critique
Total: /25
Comments:
Assignment 4. Web Site Proposal
Due Wednesday February 26The goal of this assignment is to write a written proposal for your website. Please check the Final Project assignment sheet for some of the criteria that will be required. Your proposal must include the technologies that will be used in your website and proof of research into similar sites. You must also provide a rough outline of the view and layout for all of the different pages that will make up your website.
To receive full credit, your proposal you must include the following:
Proof of Research/Process Documentation
Detailed Wireframes
Site Map
Typed Packet and Presentation
Total: /30
Comments:
Assignment 5. Final Project and Presentation
Due Monday March 24The goal of this assignment is to create your final website from your proposal and the wireframes of the last assignment. In addition to creating the site, the student will present their finished work and participate in a peer critique of their work.
To receive full credit, you must include the following:
Validated Markup (6 points per page)
Validated CSS (6 points per page)
File Management
Required Pages with working links
Meta Tags and Page Titles (2 points per page)
Proper Formatting of Tags, Text, & Image
Visual Presentation
Participation in Peer Critique
Code Organization
Use of CSS, PHP, and JS
CD/DVD with finished site
Total: /100
Comments:
The final grade will be based on the following scheduled activities:
Quizzes & Exams
If you have ZERO (0) absences in the quarter and a grade of B+ or higher (this includes tardies adding up to a missed class) you can EXEMPT the final!